@charset "utf-8";
@import "reset";

@function r($px) {
    @return $px/100px * 1rem;
}
body{
    background-color: #f1f1f1;
.web{
    width: r(640px);
    header{
        margin: 0 auto;
        width: r(640px);
        height: r(87px);
        background-color: #1e1e1e;
        display: flex;
        justify-content: space-between;
        position: relative;
        border-bottom: 1px solid #484848;
        padding-left: r(16px);
        .max{
            height: 44px;
            position: relative;
            
        i{
            color: #FFFFFF;
            position: absolute;
            left: 15px;
            top: 14px;
            z-index: 2;
        }
        input{
            width: r(530px);
            height: 26px;
            font-size: 11px;
            background-color: #1E1E1E;
            border-radius: 50px;
            border: 1px solid #d2d2d2;
            padding-left: 40px;
            margin: r(20px) r(10px) r(10px) r(10px);
            color: #7e7e7e;
            position: absolute; 
            }
            
        }
        .tou{
            line-height: r(87px);
            padding-right: r(14px);
            p{
                font-size: 13px;
                color: #FFFFFF;
            }
        }
    }
    .search{
        background-color: #f1f1f1;
        padding: 0 r(30px) 0 r(30px);
                
        h3{ 
            padding: r(32px) 0 r(16px) 0;
            font-size: 13.5px;
        }
        .searc{
            display: flex;
            justify-content: flex-start;
            .sear{
                width: r(151px);
                height: r(55px);
                border: 1px solid #e4e4e4;
                background-color: #FFFFFF;
                p{
                    font-size: 14.5px;
                    text-align: center;
                    line-height: r(55px);
                    color: #8b8b8b;
                }
            }
             .sea{
                width: r(176px);
                height: r(55px);
                border: 1px solid #e4e4e4;
                margin: 0 r(8px) 0 r(8px);
                background-color: #FFFFFF;
                p{
                    font-size: 14.5px;
                    text-align: center;
                    line-height: r(55px);
                        color: #8b8b8b;
                }
            }
            .ser{
                width: r(200px);
                height: r(55px);
                background-color: #FFFFFF;
                border: 1px solid #e4e4e4;
                p{
                    font-size: 14.5px;
                    text-align: center;
                    line-height: r(55px);
                    color: #8b8b8b;
                }
            }
        }    
            .ham{
                display: flex;
                justify-content: flex-start;
                padding-top: r(10px);
                .mar{
                width: r(117px);
                height: r(55px);
                background-color: #FFFFFF;
                border: 1px solid #e4e4e4;
                p{
                    letter-spacing: r(1px);
                    font-size: 14.5px;
                    text-align: center;
                    line-height: r(55px);
                    color: #8b8b8b;
                }
            }
            .you{
                width: r(150px);
                height: r(55px);
                background-color: #FFFFFF;
                border: 1px solid #e4e4e4;
                margin: 0 r(8px) 0 r(8px);
                p{
                    font-size: 14.5px;
                    text-align: center;
                    line-height: r(55px);
                    color: #8b8b8b;
                }
            }
             .wau{
                width: r(288px);
                height: r(55px);
                background-color: #FFFFFF;
                border: 1px solid #e4e4e4;
                p{
                    font-size: 14.5px;
                    text-align: center;
                    line-height: r(55px);
                    color: #8b8b8b;
                }
            }
        }    
        .gam{
                display: flex;
                justify-content: flex-start;
                padding-top: r(11px);
                .gan{
                    width: r(92px);
                    height: r(55px);
                    background-color: #FFFFFF;
                    border: 1px solid #e4e4e4;
                    margin-right: r(7px);
                    p{
                    font-size: 14.5px;
                    text-align: center;
                    line-height: r(55px);
                    color: #8b8b8b;
                }
                }
                .eam{
                    width: r(250px);
                    height: r(55px);
                    background-color: #FFFFFF;
                    border: 1px solid #e4e4e4;
                    margin-right: r(7px);
                    p{
                    font-size: 14.5px;
                    text-align: center;
                    line-height: r(55px);
                    color: #8b8b8b;
                }
                }
                
                
            }   
                
                
                
        
        
        
    }
    
  }
}

